<template>
    <div :class="`shop-container ${mode}`">
        <div class="container-title">
            <div class="container-name title-color">{{name}}</div>
            <div v-if="info" class="container-info">{{info}}</div>
            <div v-if="isLink" class="link">
                <MiniIcon name="right" theme="#7D7D83" size="14" />
            </div>
        </div>
        <div :class="`container-content ${direction} ${canScroll ? '' : 'cant-scroll'}`">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'ShopContainer', // 容器
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        name: {
            type: String,
            default: 'ShopContainer',
        },
        info: String,
        canScroll: {
            type: Boolean,
            default: true,
        },
        direction: {
            type: String,
            default: 'vertical',
            validator: (value) => {
                return ['horizontal', 'vertical'].indexOf(value) !== -1;
            },
        },
        isLink: {
            type: Boolean,
            default: false,
        },
    },

};
</script>

<style lang="less">
.shop-container {
    background-color: @white;
    .mode-white();
    .container-title {
        .flex-row-between();
        padding: @shop-gap @shop-gap-md;
        align-items: center;
        .container-name {
            .font-size-lg();
            font-weight: @font-weight-bold;
        }
        .container-info {
            .font-size-sm();
            color: @tip-color;
        }
    }
    .container-content {
        &.horizontal {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }
        &.vertical {
            overflow-x: hidden;
            overflow-y: scroll;
        }
        &.cant-scroll {
            overflow: hidden !important;
        }
    }
}
</style>
